<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求详情 - 任务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
    <link th:href="@{/css/requirement-detail.css}" rel="stylesheet">
</head>
<body>
    <!-- 主导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-kanban"></i> 任务管理系统
            </a>
            <div class="navbar-nav me-auto">
                <a class="nav-link" href="/dashboard">🏠 工作台</a>
                <a class="nav-link" href="/projects">📋 项目管理</a>
                <a class="nav-link active" href="/requirements">📝 需求管理</a>
                <a class="nav-link" href="/tasks">✅ 任务管理</a>
                <a class="nav-link" href="/developers">👥 开发者管理</a>
            </div>
            <div class="navbar-nav">
                <div class="nav-item">
                    <input type="search" class="form-control" placeholder="全局搜索..." id="globalSearch">
                </div>
                <a class="nav-link" href="#">👤 用户</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航 -->
            <nav class="col-md-2 d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="bi bi-house"></i> 工作台
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/projects">
                                <i class="bi bi-folder"></i> 项目管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/requirements">
                                <i class="bi bi-file-text"></i> 需求管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/tasks">
                                <i class="bi bi-check-square"></i> 任务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/developers">
                                <i class="bi bi-people"></i> 开发者管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/settings">
                                <i class="bi bi-gear"></i> 系统设置
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <!-- 面包屑导航 -->
                <nav aria-label="breadcrumb" class="mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/dashboard">工作台</a></li>
                        <li class="breadcrumb-item"><a href="/requirements">需求管理</a></li>
                        <li class="breadcrumb-item active" aria-current="page">需求详情</li>
                    </ol>
                </nav>

                <!-- 页面标题和操作区 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <div class="d-flex align-items-center">
                        <h1 class="h2 me-3" id="requirementTitle">需求详情</h1>
                    </div>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-outline-primary" id="editBtn">
                                <i class="bi bi-pencil"></i> 编辑
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 需求基本信息 -->
                <div class="row">
                    <div class="col-lg-8">
                        <!-- 需求详情卡片 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-file-text"></i> 需求信息
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>需求标题:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailTitle">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>需求描述:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailDescription">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>所属项目:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailProject">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>负责人:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailOwner">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>预期完成时间:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailExpectedDate">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-3">
                                        <strong>创建时间:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailCreatedAt">
                                        加载中...
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <strong>最后更新:</strong>
                                    </div>
                                    <div class="col-sm-9" id="detailUpdatedAt">
                                        加载中...
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 参考文档管理 -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-file-earmark-text"></i> 参考文档
                                    <span class="badge bg-secondary ms-2" id="documentCount">0</span>
                                </h5>
                                <button type="button" class="btn btn-sm btn-primary" id="addDocumentBtn">
                                    <i class="bi bi-plus"></i> 添加文档
                                </button>
                            </div>
                            <div class="card-body">
                                <div id="documentsList">
                                    <div class="text-center text-muted py-4" id="noDocuments">
                                        <i class="bi bi-file-earmark-text" style="font-size: 3rem;"></i>
                                        <p class="mt-2">暂无参考文档</p>
                                        <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('addDocumentBtn').click()">
                                            <i class="bi bi-plus"></i> 添加第一个文档
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 关联任务 -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-list-task"></i> 关联任务
                                    <span class="badge bg-secondary ms-2" id="taskCount">0</span>
                                </h5>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="createTaskBtn">
                                    <i class="bi bi-plus"></i> 创建任务
                                </button>
                            </div>
                            <div class="card-body">
                                <div id="tasksList">
                                    <div class="text-center text-muted py-4" id="noTasks">
                                        <i class="bi bi-list-task" style="font-size: 3rem;"></i>
                                        <p class="mt-2">暂无关联任务</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧信息面板 -->
                    <div class="col-lg-4">
                        <!-- 状态流转和操作历史功能已移除 -->

                        <!-- 快速操作 -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bi bi-lightning"></i> 快速操作
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <button type="button" class="btn btn-outline-primary" id="assignOwnerBtn">
                                        <i class="bi bi-person-plus"></i> 分配负责人
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加文档模态框 -->
    <div class="modal fade" id="addDocumentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-file-earmark-plus"></i> 添加参考文档
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="addDocumentForm">
                        <div class="mb-3">
                            <label for="documentTitle" class="form-label">文档标题 *</label>
                            <input type="text" class="form-control" id="documentTitle" required maxlength="200" placeholder="请输入文档标题">
                            <div class="form-text">最多200个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="documentUrl" class="form-label">文档链接 *</label>
                            <input type="url" class="form-control" id="documentUrl" required maxlength="500" placeholder="https://example.com/document.pdf">
                            <div class="form-text">请输入有效的URL地址，最多500个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="documentDescription" class="form-label">文档描述</label>
                            <textarea class="form-control" id="documentDescription" rows="3" maxlength="1000" placeholder="简要描述文档内容（可选）"></textarea>
                            <div class="form-text">最多1000个字符</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveDocumentBtn">
                        <i class="bi bi-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert">
            <div class="toast-header text-success">
                <i class="bi bi-check-circle-fill me-2"></i>
                <strong class="me-auto">成功</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="successMessage">
                操作成功！
            </div>
        </div>
        <div id="errorToast" class="toast" role="alert">
            <div class="toast-header text-danger">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <strong class="me-auto">错误</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body" id="errorMessage">
                操作失败，请重试！
            </div>
        </div>
    </div>

    <!-- 分配负责人弹窗 -->
    <div class="modal fade" id="assignOwnerModal" tabindex="-1" aria-labelledby="assignOwnerModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="assignOwnerModalLabel">
                        <i class="bi bi-person-plus"></i> 分配负责人
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="assignOwnerForm">
                        <div class="mb-3">
                            <label for="ownerSelect" class="form-label">选择负责人 <span class="text-danger">*</span></label>
                            <select class="form-select" id="ownerSelect" required>
                                <option value="">请选择负责人</option>
                                <!-- 开发者选项将通过JavaScript动态加载 -->
                            </select>
                            <div class="form-text">只显示可分配任务的开发者</div>
                        </div>
                        <div class="mb-3">
                            <label for="assignReason" class="form-label">分配原因</label>
                            <textarea class="form-control" id="assignReason" rows="3" placeholder="请输入分配原因（可选）"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmAssignBtn">
                        <i class="bi bi-check"></i> 确认分配
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">加载中...</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/main.js?v=23}"></script>
    <script th:src="@{/js/requirement-detail.js?v=23}"></script>
</body>
</html>